<template>
  <base-modal
    :title="$t('common.base.qualificationManagement')"
    :show.sync="remindCustomerDialog"
    class="batch-remind-customer-dialog"
    @closed="remindCustomerDialog = false"
    style="z-index:1000"
    width="80%"
  >
    <div class="qualification-table">
      <div class="qualification-search-box">
        <el-input class="qualification-input" :placeholder="$t('common.placeholder.inputQualificationNameSearch')" v-model="qualificationName"></el-input>
        <el-button type="primary" @click="fetchData">{{$t('common.base.search')}}</el-button>
        <el-button @click="reset">{{$t('common.base.reset')}}</el-button>
        <el-button type="primary" @click="created"><i class="iconfont icon-add2" style="margin-right:6px" ></i>{{$t('common.button.addQualification')}}</el-button>
      </div>
      <el-table
        border
        stripe
        :data="qualificationsPage.list"
      >
        <el-table-column type="index" width="100px" :label="$t('common.base.SN')"></el-table-column>
        <el-table-column prop="qualificationName" :label="$t('common.label.qualificationName')" />
        <el-table-column prop="preliminaryExaminationTime" :label="$t('common.label.firstTrialDate')" >
        </el-table-column>
        <el-table-column prop="reviewTime" :label="$t('common.label.reviewDate')" >
        </el-table-column>
        <el-table-column prop="expireTime" :label="$t('common.label.expireDate')" >
        </el-table-column>
        <el-table-column prop="displayName" :label="$t('common.label.expireRemind')">
          <template slot-scope="scope">
            {{scope.row.reminderSwitch==0 ? $t('common.base.closed') : $t('common.base.open')}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.base.operation')">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="edit(scope.row)"
            >{{$t('common.base.edit')}}</el-button>
            <el-button
              type="text"
              @click="deleteItem(scope.row)"
            >{{$t('common.base.delete')}}</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="table-footer">
        <div class="list-info">
          <i18n path="common.base.table.totalCount" tag="span">
            <span place="count" class="level-padding">{{ qualificationsPage.total }}</span>
          </i18n>
        </div>
        <el-pagination
          class="customer-table-pagination"
          background
          @current-change="jump"
          @size-change="handleSizeChange"
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="params.pageSize"
          :current-page="params.pageNum"
          layout="prev, pager, next, sizes, jumper"
          :total="qualificationsPage.total">
        </el-pagination>
      </div>
    </div>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="remindCustomerDialog = false">关闭</el-button>
      <el-button  type="primary" @click="">确定</el-button>
    </div> -->
    <zi-zhi-from @addQualifications="addQualifications" @updateQualifications="updateQualifications" ref="zzFrom"></zi-zhi-from>
  </base-modal>
</template>

<script>
import _ from 'lodash';
import ziZhiFrom from './ziZhiFrom.vue';
import Page from '@model/Page';
import * as serviceProviderApi from '@src/api/serviceProviderApi';
import { defaultTableData } from '@src/util/table'
export default {
  name: 'change-dialog',
  data: () => {
    return {
      defaultTableData,
      remindCustomerDialog: false,
      pending: false,
      editedRemind: {},
      qualificationsPage: new Page(),
      params: {
        pageNum:1,
        pageSize:10,
      },
      loading:false,
      qualificationName:'',
      currentRow:{}
    };
  },
  props: {
    row: {
      type: Object,
      default: () => ({}),
    }
  },
  watch:{
    'row.staffId':{
      handler(newName, oldName) {
        if(newName){
          this.fetchData();
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    reset(){
      this.qualificationName = ""
      this.params = {
        pageNum:1,
        pageSize:10,
      },
      this.fetchData()
    },
    addQualifications(form){
      serviceProviderApi.addQualifications(Object.assign({staffId:this.row.staffId},form)).then(res=>{
        if(res.succ){
          this.$message.success(res.message);
          this.$refs.zzFrom.closeDialog()
          this.fetchData()
        }else{
          this.$message.error(res.message)
        }
      })
    },
    updateQualifications(form){
      serviceProviderApi.updateQualifications(Object.assign({staffId:this.row.staffId,id:this.currentRow.id},form)).then(res=>{
        if(res.succ){
          this.$message.success(res.message);
          this.$refs.zzFrom.closeDialog()
          this.fetchData()
        }else{
          this.$message.error(res.message)
        }
      })
    },
    edit(row){
      this.currentRow = row
      this.$refs.zzFrom.openDialog('update',row)
    },
    deleteItem(row){
      this.$confirm(this.$t('common.base.tip.delQualicationConfirm'), this.$t('common.base.delete'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: "warning",
      }).then(() => {
          serviceProviderApi.deleteQualifications({id:row.id}).then(res=>{
            if(res.succ){
              this.$message.success(res.message);
              this.fetchData()
            }else{
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {});
    },
    /** 抓取用户数据 */
    fetchData(){
      if(!this.row.staffId) return
      let params = this.params;

      serviceProviderApi.getQualifications(Object.assign({staffId:this.row.staffId,qualificationName:this.qualificationName},params)).then(res => {
        this.qualificationsPage.list = []
        this.qualificationsPage.merge(Page.as(res.data));
      })
        .catch(err => console.error('err', err))

    },
    jump(pageNum) {
      this.params.pageNum = pageNum;

      this.qualificationsPage.list = [];

      this.fetchData()
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = 1;

      this.qualificationsPage.list = [];

      this.fetchData()
    },
    created(){
      this.$refs.zzFrom.openDialog()
    },
    openDialog() {
      this.remindCustomerDialog = true;
    }
  },
   components: {
    [ziZhiFrom.name]: ziZhiFrom,
  }
};
</script>

<style lang="scss" scoped>
.qualification-table {
  padding: 20px;
  .qualification-search-box {
    margin: 0 0 12px;
  }
  .qualification-input{
    width:300px;
    margin-right:10px
  }
}
</style>
